<!--
 *面板屑导航
 * @Author: 舒克
 * @Official Accounts: 氧化1028
 * @email: 143587623@qq.com
 * @github: https://gitee.com/KingSio
 * @Date: 2021-01-19 15:27:27
 * @LastEditTime: 2021-03-17 17:41:35
 * @FilePath: \个人项目\vue\1.vue全站管理系统\vue_shop\src\components\common\CrumbsTag.vue
-->

<template>
  <div class="pag-tag">
    <el-tag
      v-for="(item, index) in tagNav"
      :key="index"
      type="info"
      size="medium"
      :disable-transitions="false"
      :class="tagActiveClick(item) ? 'tagActive' : ''"
      @close="closeTag(index)"
      closable
    >
      <a @click="clickTag(item)" class="tagName">{{ item.name }} </a>
    </el-tag>
  </div>
</template>
<script>
import Storage from '@/utils/Storage.js'
export default {
  props:{
 
  },
  data() {
    return {

    }
  },
  computed: {
    tagNav(){
        console.log(this.$store.state.TagList.tagList);
        return this.$store.state.TagList.tagList;
      },
    
  },

  created() {
     
  },
  mounted() {
    //页面刷新
  },

  methods: {
    //点击切换
    clickTag(item) {
      //item是路由数据
      /* 
      如果使用name：根据name传送
      如果使用path：根据path传送
      */
      if (item.path !== this.$route.path) {
        this.$router.push({
          path: item.path
        })
        this.$emit('tag', item.path);
        
      }
    },

    //删除面包屑
    closeTag(index) {
      //this.$router这个是Vue路由的一个对象，是一个全局对象，包含所有路由
      //this.$route,是指当前页面下的路由
      console.log(this.$router)
      let router = this.$router
      this.$store.commit('REMOVETAG', {
        index: index,
        router: router
      })
    

    },

    //切换的样式
    tagActiveClick(item) {
      //如果点击的路由等于当前的路由就返回状态出去
      return item.path === this.$route.path
    }
  }
}
</script>
<style lang="less" scoped>
.pag-tag {
  margin-top: -13px;
  /deep/.tagActive {
    background-color: #6fb7eb;
    color: black;
  }
  .tagName {
    color: rgb(129, 123, 123);
  }
}
.el-tag {
  margin-right: 10px;
}
</style>
